Третья лекция

 ----------------------
|              margin
|    __________________
|   |          border
|   |    --------------
|   |   |      padding
|   |   |     _________
|   |   |    | CONTENT

margin может склеиваться между соседними или родительскими элементами

Виды позиционирования

static - как обычно
relative - относительно родительского
absolute (fixed) - абсолютное позиционирование на странице (экране)

Виды элементов

block-level-element - каждый элемент с каждой строки
- display: block , table , list-item
inline-level-element - элемент продолжает строку предыдущего элемента
- display: inline , inline-table , inline-block
…

display влияет не только на то, как элемент отображается рядом с другими, но и на то, как отображается содержимое самого элемента.

Контекст форматирования

block
inline

Других нет.

Анонимный блочный элемент

<div>
    Some text<!-- этот текст обернётся в <div> -->
    <p>Some text</p>
</div>

Потоки (слои)

Вырванный из потока (слоя) элемент

Элемент, если это:

корневой <html>
position: absolute
float

Элемент в потоке (слое)

все остальное

Поток (слой) элемента

Свой поток (слой) создают вырванные из потока элементы.